<template>
  <el-card body-style="padding: 5px;">
    <div class="header">
      <router-link class="logo" to="/"
        ><el-avatar src="/favicon.png" />
      </router-link>
      <div class="hitokoto">测试</div>
      <div class="menu">
        <template v-if="!loggedUser">
          <router-link to="/">首页</router-link>
          <router-link to="/register">注册</router-link>
          <router-link to="/login">登录</router-link>
        </template>
        <template v-else>
          <el-dropdown trigger="click" @command="handleMenu">
            <div class="menu">
              <el-avatar class="avatar" :src="loggedUser.avatar"></el-avatar>
              <span class="el-dropdown-link">
                {{ loggedUser.name }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item icon="pointer" @click="handleSign">
                  每日签到
                </el-dropdown-item>
                <el-dropdown-item divided icon="plus" command="score-rank">
                  积分排名
                </el-dropdown-item>
                <el-dropdown-item divided icon="plus" command="write-post">
                  发布帖子
                </el-dropdown-item>
                <el-dropdown-item divided icon="ChatLineRound" command="chat">
                  在线聊天
                </el-dropdown-item>
                <el-dropdown-item divided icon="user" command="user">
                  个人中心
                </el-dropdown-item>
                <el-dropdown-item
                  divided
                  icon="setting"
                  command="admin-manager"
                  v-if="loggedUser.role === 'ADMIN'"
                >
                  网站管理
                </el-dropdown-item>
                <el-dropdown-item divided icon="close" @click="handleLogout">
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
import { logout, signing } from "../api/userAPI";

const router = useRouter();
const store = useStore();
const loggedUser = computed(() => store.getters.loggedUser);

const handleSign = () => {
  signing().then((data) => {
    ElMessage.success(data.message);
  });
};

const handleLogout = () => {
  logout().then((data) => {
    ElMessage.success(data.message);
    store.commit("clearLogged");
    router.push("/");
  });
};

const handleMenu = (arg) => {
  const routerTable = {
    "write-post": "/publish",
    user: "/user-center",
    "admin-manager": "/admin",
    chat: "/chat",
    "score-rank": "/score-rank",
  };
  if (Object.keys(arg).length !== 0) router.push(routerTable[arg]);
};

fetch("https://v1.hitokoto.cn")
  .then((response) => response.json())
  .then((data) => {
    const hitokoto = document.querySelector(".hitokoto");
    hitokoto.href = `https://hitokoto.cn/?uuid=${data.uuid}`;
    hitokoto.innerText = data.hitokoto;
  })
  .catch(console.error);
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
}

.logo {
  display: flex;
  flex: 1;
}

.hitokoto {
  flex: 10;
  display: flex;
  justify-content: center;
  font-weight: bold;
}

.menu {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.avatar {
  margin-right: 10px;
}
</style>
